// react-select 基础样式
import React from 'react';
import ReactSelect, { components, Option, Options } from 'react-select';

export interface ISelectProps {
  /**
   * 表单的字段名称
   */
  name?: string;
  /**
   * 当前值
   */
  value?: Option;
  onChange?: (option: Option | null) => void;
  onFocus?: React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
  options: Options;
  searchable?: boolean;
}

const NoOptionsMessage = (props: any) => {
  return <components.NoOptionsMessage {...props}>暂无数据</components.NoOptionsMessage>;
};

// 自定义提示箭头
const DropdownIndicator = (props: any) => {
  const iconClass =  props.selectProps.menuIsOpen ? 'icon-up' : 'icon-down';
  return <i className={`icon ${iconClass} text text-help`} />;
};

export default (props: ISelectProps) => {
  return <ReactSelect
    classNamePrefix="select"
    placeholder="请选择"
    {...props}
    components={{ IndicatorSeparator: null, DropdownIndicator, NoOptionsMessage }}
  />;
};
